<template>
  <div id="app">
    <!-- 应用头部 -->
    <el-header class="app-header">
      <div class="header-content">
        <div class="header-left">
          <el-icon class="header-icon"><DataAnalysis /></el-icon>
          <h1 class="app-title">U9-SMIS ERP数据查询系统</h1>
        </div>
        <div class="header-right">
          <el-button 
            type="primary" 
            @click="showAboutDialog = true"
            :icon="InfoFilled"
            circle
          />
        </div>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-container class="main-container">
      <el-main class="app-main">
        <div class="content-wrapper">
          <!-- U9 API专用配置 -->
          <div class="section">
            <U9ApiConfig />
          </div>

          <!-- 状态信息 -->
          <div class="status-bar">
            <div class="status-item">
              <span class="status-label">数据项数量:</span>
              <el-tag type="info" size="small">{{ Object.keys(dataStore.fetchedData).length }}</el-tag>
            </div>
            <div class="status-item">
              <span class="status-label">数据状态:</span>
              <el-tag 
                :type="dataStore.loading ? 'warning' : (dataStore.hasData ? 'success' : 'default')" 
                size="small"
              >
                {{ dataStore.loading ? '查询中...' : (dataStore.hasData ? '有数据' : '无数据') }}
              </el-tag>
            </div>
            <div class="status-item">
              <span class="status-label">错误数量:</span>
              <el-tag 
                :type="dataStore.errorCount > 0 ? 'danger' : 'success'" 
                size="small"
              >
                {{ dataStore.errorCount }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>

    <!-- 关于对话框 -->
    <el-dialog 
      v-model="showAboutDialog" 
      title="关于系统"
      width="500px"
    >
      <div class="about-content">
        <h3>U9 ERP数据查询与可视化系统</h3>
        <p>这是一个基于Vue 3开发的现代化前端系统，专门用于：</p>
        <ul>
          <li>U9 ERP系统数据查询配置</li>
          <li>可视化参数配置界面</li>
          <li>JSON格式数据获取和整理</li>
          <li>多维度数据可视化和分析</li>
          <li>数据导出和分享</li>
        </ul>
        
        <el-divider />
        
        <div class="tech-stack">
          <h4>技术栈</h4>
          <el-tag v-for="tech in techStack" :key="tech" style="margin: 2px;">
            {{ tech }}
          </el-tag>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DataAnalysis, InfoFilled } from '@element-plus/icons-vue'
import { useDataStore } from './stores/dataStore.js'
import U9ApiConfig from './components/U9ApiConfig.vue'

const dataStore = useDataStore()
const showAboutDialog = ref(false)

const techStack = [
  'Vue 3', 'Composition API', 'Vite', 'Element Plus', 
  'Pinia', 'Axios', 'JavaScript', 'CSS3'
]
</script>

<style scoped>
#app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-header {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 80px;
  display: flex;
  align-items: center;
}

.header-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 32px;
  color: #ffffff;
}

.app-title {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-right {
  display: flex;
  align-items: center;
}

.main-container {
  min-height: calc(100vh - 80px);
}

.app-main {
  padding: 24px;
  background: transparent;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  margin-bottom: 24px;
}

.status-bar {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-label {
  font-weight: 500;
  color: #606266;
}

.about-content {
  padding: 16px;
}

.about-content h3 {
  margin: 0 0 16px 0;
  color: #303133;
}

.about-content p {
  margin: 0 0 12px 0;
  color: #606266;
  line-height: 1.6;
}

.about-content ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
  color: #606266;
}

.about-content li {
  margin-bottom: 8px;
}

.tech-stack h4 {
  margin: 0 0 12px 0;
  color: #409eff;
}

:deep(.el-header) {
  padding: 0;
}

:deep(.el-main) {
  padding: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
  }
  
  .app-title {
    font-size: 18px;
  }
  
  .app-main {
    padding: 16px;
  }
  
  .status-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .status-item {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
